<template>
<el-popover
  placement="bottom-start"
  width="400"
  trigger="click">
  <el-input v-model="queryString" style="position: relative;" clearable placeholder="请输入客户名称" @clear="querySearch" @input.native="querySearch">
    <i slot="suffix" class="el-icon-search el-input__icon" />
  </el-input>
<el-table :data="gridData" @row-click="handleSelect">
  <el-table-column  property="customerName" label="客户姓名"></el-table-column>

  <el-table-column  property="cellName" label="格位名称"></el-table-column>

</el-table>

  <el-input slot="reference"  placeholder="点击选择格位" :value ="getUserDisplay" readonly>
    <i slot="prefix" class="el-icon-search el-input__icon" />
  </el-input>

</el-popover>
</template>
<script>
import {listCellOrder} from "@/api/fm/cellOrder";

export default {
  data() {
    return {queryString:"",
      customerId:null,
      customerName:null,
      cellName:null,
      cellId:null,
      cellOrderId:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        customerName: null,
        status:1
      },
      gridData: []
    };
  },
  props: {},
  methods: {
    querySearch()
    {
      if (this.queryString)
      {
        this.queryParams.customerName=this.queryString;
        listCellOrder(this.queryParams).then((response) => {
          this.gridData = response.rows;

        }).catch((err) => {
          console.log(err)
        });
      }
    },
    handleSelect(row, event, column)
    {
       this.customerId = row.customerId;
       this.customerName = row.customerName;
       this.cellId=row.cellId;
       this.cellName=row.cellName;
       this.cellOrderId = row.id;
       this.$emit("orderSelect", [this.cellId,this.cellOrderId]);
      document.body.click()
    },

    reset(){
      this.customerId = null;
      this.customerName=null;
      this.cellId=null;
      this.cellName=null;
      this.cellOrderId =null;
      this.gridData= [];
      this.queryString="";
    }
  },
  computed : {
    getUserDisplay :function()
    {
      if(this.cellName)
      {
        return this.cellName + " (客户：" + this.customerName + ")";
      }
      return "";
    }
  }
};
</script>
